<template>
    <div>
        <div class="d-flex justify-space-between align-center" style="padding:10px 26px 30px">
            <div class="pr-12" style="width:60%">
                <div class="default--text text-h5 font-weight-bold">{{ $t('Page.Foundation.Title') }}</div>
                <div class="default--text text-body-2 mt-10">{{ $t('Page.Foundation.Desc') }}</div>
                <div class="d-flex justify-start align-center mt-6">
                    <div>
                        <v-menu open-on-hover offset-y min-width="190" content-class="nav-menu" max-height="auto">
                            <template v-slot:activator="{ on, attrs }">
                                <v-btn outlined depressed color="#AC8250" v-bind="attrs" v-on="on" class="px-2">
                                    <div class="d-flex justify-start align-center">
                                        <div class="default--text">{{ $t('Page.Foundation.Menu1') }}</div>
                                        <v-icon class="default--text">{{ icons.mdiMenuDown }}</v-icon>
                                    </div>
                                </v-btn>
                            </template>  
                            <v-list style="border: 1px solid #AC8250;border-radius:8px">
                                <v-list-item class="default--text text-body-2 cursor-pointer">{{ $t('Page.Foundation.Menu1') }}</v-list-item>
                                <v-list-item class="default--text text-body-2 cursor-pointer">{{ $t('Page.Foundation.Menu2') }}</v-list-item>
                                <v-list-item class="default--text text-body-2 cursor-pointer">{{ $t('Page.Foundation.Menu3') }}</v-list-item>
                            </v-list>
                        </v-menu> 
                    </div>
                    <v-btn depressed color="#AC8250" class="white--text ml-2 mr-4">{{ $t('Page.Foundation.Btn1') }}</v-btn>
                    <v-btn depressed color="#AC8250" class="white--text">{{ $t('Page.Foundation.Btn2') }}</v-btn>
                </div>
            </div>

            <div class="pl-12" style="width:40%">
                <img width="100%" src="../assets/images/png/foundation_create.png" />
            </div>
        </div>

        <div class="d-flex justify-space-between mt-10 mx-auto" style="padding:0 26px 80px;max-width:1800px;">
            <v-card elevation="0" color="#AC8250" width="318" height="130" class="d-flex justify-center flex-column text-center">
                <div class="text-h6 font-weight-bold white--text">{{ $t('Page.Foundation.BlockText1') }}</div>
                <div class="text-h6 font-weight-bold white--text mt-6">20</div>
            </v-card>
            <v-card elevation="0" color="#AC8250" width="318" height="130" class="d-flex justify-center flex-column text-center px-5 mx-5">
                <div class="text-h6 font-weight-bold white--text">{{ $t('Page.Foundation.BlockText2') }}</div>
                <div class="text-h6 font-weight-bold white--text mt-6">62</div>
            </v-card>
            <v-card elevation="0" color="#AC8250" width="318" height="130" class="d-flex justify-center flex-column text-center">
                <div class="text-h6 font-weight-bold white--text">{{ $t('Page.Foundation.BlockText3') }}</div>
                <div class="text-h6 font-weight-bold white--text mt-6">56.22%</div>
            </v-card>
        </div>

        <div style="background:#F0EDE5;margin:0 -24px -56px;padding:90px 50px 120px">
            <v-card elevation="0" class="d-flex justify-space-between align-end px-10 py-6">
                <div>
                    <div class="default--text text-h6">{{ $t('Page.Foundation.SubTit1') }}</div>
                    <div class="theme-text mt-7">SCT</div>
                    <div class="d-flex justify-start align-center">
                        <img width="42" height="42" src="@/assets/images/svg/sct.svg" class="rounded-circle" />
                        <div class="theme-text font-weight-bold ml-2" style="font-size:38px">0.0185</div>
                    </div>
                </div>

                <div>
                    <v-btn depressed color="#AC8250" min-height="58" class="text-h6 white--text">{{ $t('Page.Foundation.Btn3') }}</v-btn>
                </div>
            </v-card>

            <v-card elevation="0" class="mt-12 pa-5">
                <v-simple-table>
                    <thead>
                        <tr>
                            <th class="text-center" v-for="(item, index) in th" :key="index">{{ $t(item) }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="index of 10" :key="index">
                            <td class="text-center">54</td>
                            <td class="text-center">{{ $t('Page.Foundation.TdText') }}</td>
                            <td class="text-center">345</td>
                            <td class="text-center">60%</td>
                            <td class="text-center">$324.618</td>
                            <td class="text-center">25.39%</td>
                            <td class="text-center">
                                <v-btn depressed small color="#AC8250" class="white--text rounded-pill">{{ $t('Page.Foundation.Btn4') }}</v-btn>
                            </td>
                        </tr>
                    </tbody>
                </v-simple-table>
            </v-card>
        </div>
    </div>
</template>
  
<script>
import { mdiMenuDown } from '@mdi/js'
  
export default {
    components: {
    },
    data() {
        return {
            icons: {
                mdiMenuDown
            },
            th: ['Page.Foundation.Th1', 'Page.Foundation.Th2', 'Page.Foundation.Th3', 'Page.Foundation.Th4' ,'Page.Foundation.Th5' ,'Page.Foundation.Th6', 'Page.Foundation.Th7']
        }
    },
    watch: {
    },
    mounted() {
    },
    methods: {
      
    },
  }
  </script>
  
  <style lang="scss" scoped>
   .theme-text {
        color: #AC8250;
    }
  </style>
  